<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i>后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/sys-admin/product/spu-management'}">SPU台账</el-breadcrumb-item>
      <el-breadcrumb-item>{{$router.currentRoute.name}}</el-breadcrumb-item>
      <el-breadcrumb-item><span>{{ spu.name }}</span></el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <div style="margin-bottom: 20px;">
      <el-button type="primary" size="medium" @click="openAddNewDialog">添加SKU</el-button>
      <el-button type="primary" size="medium" @click="gotoList">返回列表</el-button>
    </div>
    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
      <el-table-column prop="title" label="标题" header-align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="barCode" label="条形码" width="140" align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="price" label="售价" width="80" align="center"></el-table-column>
      <el-table-column prop="stock" label="库存" width="80" align="center"></el-table-column>
      <el-table-column prop="stockThreshold" label="库存阈警值" width="100" align="center"></el-table-column>
      <el-table-column prop="sales" label="销量" width="80" align="center"></el-table-column>
      <el-table-column prop="positiveCommentCount" label="好评" width="80" align="center"></el-table-column>
      <el-table-column prop="commentCount" label="评论" width="80" align="center"></el-table-column>
      <el-table-column prop="sort" label="排序序号" width="100" align="center"></el-table-column>
      <el-table-column label="参数清单" width="100" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="openParamListDialog(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle size="mini"
                     @click="openEditDialog(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle size="mini"
                     @click="openDeleteConfirm(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增SKU表单的对话框 -->
    <el-dialog title="新增SKU" :visible.sync="addNewDialogVisible">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <!-- SKU的固定属性 -->
        <el-form-item label="标题">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="条形码">
          <el-input v-model="ruleForm.barCode"></el-input>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="ruleForm.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>




        <!-- SKU的固定属性 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="库存">
              <el-input v-model="ruleForm.stock"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库存阈警值">
              <el-input v-model="ruleForm.stockThreshold"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="排序序号">
          <el-input v-model="ruleForm.sort"></el-input>
        </el-form-item>
        <!-- 最下方的按钮栏 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      spu: {},
      tableData: [],
      attributeList: [],
      // 新增SKU对话框的可见性
      addNewDialogVisible: false,
      // 常量：控件类型
      INPUT_TYPE_TEXT: 0,
      INPUT_TYPE_CHECKBOX_SINGLE: 1,
      // 动态表单
      specificationObject: {},
      // 表单
      ruleForm: {},
      rules: {
        specifications: ''
      }
    }
  },
  methods: {
    // 返回列表
    gotoList() {
      this.$router.push('./');
    },
    // 打开新增SKU对话框
    openAddNewDialog() {
      if(this.ruleForm.spuId){
        console.log("loadAttributeList", this.ruleForm.spuId)
        this.loadAttributeList();
      }
      this.ruleForm.spuId = this.spu.id;
      this.addNewDialogVisible = true;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 加载SPU信息
    loadSpuInfo() {
      let spuId = parseInt(this.$router.currentRoute.query.spuId);
      if (!spuId || spuId < 1) {
        let message = '参数错误，无法加载SPU数据！';
        this.$alert(message, '操作失败', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.push('/sys-admin/product/spu-management');
            return;
          }
        });
      }
      let url = 'http://localhost:9480/spus/' + spuId;

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.spu = jsonResult.data;
          this.loadSkuList();

        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.push('/sys-admin/product/spu-management');
            }
          });
        }
      });
    },
    // 加载SPU的属性列表
    loadAttributeList(){
      let url = "http://localhost:9480/attributes/list-by-template?queryType=all&templateId="+ this.spu.templateId;

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.attributeList = jsonResult.data.list;
        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.push('/sys-admin/product/spu-management');
            }
          });
        }
      });
    },
    // 加载SKU列表
    loadSkuList() {
      let url = "http://localhost:9480/skus/list-by-spu?queryType=all&spuId="+ this.spu.id;

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.tableData = jsonResult.data.list;
        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    }
  },
  mounted() {
    this.loadSpuInfo();
  }
}
</script>
<style>
.sku-param-list {
}

.sku-param-list .description-label {
  width: 150px;
}
</style>